<template>
    <div class="modal fade" id="uploadPremisesImageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" style="width: 700px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel">楼盘相册</h4>
                </div>
                <div class="modal-body">
                    <div class="form-horizontal">
                        <div class="list-info-template form-group">
                            <label class="column-title control-label"><span class="required">*</span>相册名称：</label>
                            <div class="control-details">
                                <select class="form-control" style="width:25%;float:left" v-model="imageType" >
                                    <option value="3">样板间</option>
                                    <option value="4">效果图</option>
                                    <option value="5">小区配套</option>
                                    <option value="6">实景图</option>
                                    <option value="7">项目现场</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <ul>
                                <li class="col-md-2 file-image" v-for="image in premisesImgList">
                                    <img  :src="image.imageUrl" width="100px" height="100px"/>
                                </li>
                                <li class="col-md-2 file-image" >
                                    <div class="file-upload">
                                        <input ref="imageUpload" type="file" class="file-btn" style="width:100%;" name="files" id="files" @change="onFileChange" accept="image/*">
                                        <i class="layui-icon"></i>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn checkedBtn" @click="submitList" >确定</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                premisesImgList:[],
                imageType:3
            }
        },
        mounted(){
            var _self = this;
            _self.premisesImgList = []
        },
        methods:{
            onFileChange:function (e) {
                layer.load(0, {shade: false}); //弹出加载层
                var files = e.target.files || e.dataTransfer.files;
                if (!files.length)
                    return;
                var size = files[0].size;
                if(size > 3145728){
                    layer.msg("图片大小不能超过3M");
                    layer.closeAll('loading'); //关闭加载层
                    return;
                }
                this.createImage(files[0]);
            },
            createImage(file) {
                var _self = this;
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function(e){
                    _self.ajaxfile(e.target.result);
                };
            },
            //将base64转换blob
            dataURLtoBlob(dataUrl) {
                var arr = dataUrl.split(','),
                    mime = arr[0].match(/:(.*?);/)[1],
                    bstr = atob(arr[1]),
                    n = bstr.length,
                    u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                return new Blob([u8arr], { type: mime });
            },
            //上传图片
            ajaxfile(file){
                var _self = this;
                var myForm = new FormData();   //创建formdata
                var blobBin = _self.dataURLtoBlob(file);  //base64转换blob
                myForm.append("blobObject", blobBin);  //想formData添加blob数据
                //
                this.$refs.imageUpload.value = null;
                var url = _self.utilHelper.apiUrl+'/api/uploadBase64';
                _self.$http.post(url, myForm).then((response)=>{
                    layer.closeAll('loading'); //关闭加载层
                    var data = response.body;
                    if(data.result == "1"){
                        var img = {};
                        img.imageUrl = data.resData.imgName;
                        img.imageType = _self.imageType;
                        img.premisesId = _self.$route.params.premisesId;
                        img.isDeleted = 0;
                        _self.premisesImgList.push(img);
                    }else{
                        layer.msg("图片上传失败，请重试");
                    }
                },(response)=>{
                    layer.closeAll('loading');
                    layer.msg(response);
                });
            },
            submitList(){
                var _self = this;
                for(var v in _self.premisesImgList){
                    _self.premisesImgList[v].imageType = _self.imageType;
                }
                this.$emit('saveUploadPremisesImageListener', _self.premisesImgList);
                $("#uploadPremisesImageModal").modal("hide");
                _self.premisesImgList = [];
            },
            premisesImageInit(){
                this.premisesImgList = [];
            }
        }
    }
</script>

<style scoped>
.file-upload{width: 100px;height: 100px;position: relative;padding: 30px;border: 1px dashed #e2e2e2;background-color: #fff;text-align: center;cursor: pointer;color: #999;display: inline-block;position: relative}
.file-upload:hover{border: 1px dashed #f87142;}
.file-btn{position: absolute;width: 100%;height: 100%;top: 0;left: 0;outline: none;background-color: transparent;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0;opacity: 0;cursor: pointer;    z-index: 100;}
.file-upload .layui-icon {font-size: 80px;color: #f87142;top: 10px;position: absolute;left: 10px;    z-index: 10;}
.file-image{margin: 5px 0;}

</style>